<!-- 对外组件 物资总览查看 -->
<template>
  <div ref="getMaterialsInfo" style="overflow-y: auto;max-height: 500px;">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="item in tablist" :key="item.prjCode" :label="item.prjCode" :name="item.prjId">
        <!-- 项目名称 -->
        <div class="page-title">
          <div v-for="(_item, index) in titleList" :key="index" class="page-left">
            <span>{{ _item.title }}: {{ titleObj[_item.prop] }}</span>
          </div>
          <!-- 查看物资详情/验工计价 -->
          <div class="page-right">
            <!-- 查询按钮 -->
            <el-button
              class="pms-zr-button-primary pms-zr-ClosedBtn"
              size="small"
              @click="searchClick('checkMaterial', item)"
            >查看物资详情</el-button>
            <el-button
              class="pms-zr-button-primary pms-zr-ClosedBtn"
              size="small"
              @click="searchClick('checkInspection', item)"
            >查看验工计价详情</el-button>
          </div>
        </div>
        <!-- 表格内容 -->
        <TCollapse v-for="(col, _index) in tcollapseList" :key="_index" :title="col.title">
          <CheckMaterialTable
            ref="myTable"
            :span-name="col.prop"
            :column="col.column"
            :type-name="col.type"
            :table-data="tableData[col.prop]"
          />
        </TCollapse>
      </el-tab-pane>
    </el-tabs>
    <div style="padding: 15px 0;text-align: center;margin: auto;background-color: #fff;z-index: 999;">
      <el-button class="pms-zr-button-primary pms-zr-ClosedBtn" size="small" @click="doNext">下一步</el-button>
    </div>
  </div>
</template>

<script>
import BtnConfig from '@/components/basic/btnConfig.vue'
import CheckMaterialTable from '@/views/acceptance/checkMaterials/checkMaterialTable.vue'
import { MaterialBinding, SerieceBinding, suppierColumnOption } from './baseOption'
import {
    getMaterialCodeList,
    getMaterialInfo
} from '@/api/acceptance/index'
export default {
    name: 'CheckMaterials',
    components: {
        BtnConfig,
        CheckMaterialTable
    },
    data() {
        return {
            prjInfos: [], // 下一步 以及整体项目选择的信息
            activeName: '', // 当前激活的tab
            // tab列表
            tablist: [
            ],
            // 列表标签内容
            titleList: [{
                title: '项目名称',
                prop: 'prjName'
            },
            {
                title: '站址编码',
                prop: 'siteCode'
            },
            {
                title: '投资总金额',
                prop: 'investAmount'
            }],
            // 后端返回的title数据
            titleObj: {
                prjName: '',
                siteCode: '',
                investAmount: ''
            },
            // 表格数据
            tableData: {
                MaterialBinding: [],
                SerieceBinding: [],
                SuppliedMaterials: []
            },
            // 标题
            tcollapseList: [
                {
                    title: '物资绑定明细',
                    prop: 'MaterialBinding',
                    column: MaterialBinding,
                    type: 'categoryCode'
                },
                {
                    title: '服务绑定明细',
                    prop: 'SerieceBinding',
                    column: SerieceBinding,
                    type: 'serviceCode'
                },
                {
                    title: '乙供物资明细',
                    prop: 'SuppliedMaterials',
                    column: suppierColumnOption,
                    type: 'materialCode'
                }
            ]
        }
    },
    async created() {
        const getPrjList = JSON.parse(window.sessionStorage.getItem('prjInfos'))
        localStorage.setItem('prjInfos', JSON.stringify(getPrjList))
        if (getPrjList.length > 0) {
            for (let i = 0; i < getPrjList.length; i++) {
                this.prjInfos.push(getPrjList[i].prjId)
            }
        }
        await this.getTabList()
    },
    methods: {
        // 切换tab 事件
        handleClick(tab) {
            this.activeName = tab.name
            this.getTablelist()
        },
        // 跳转到物资查看和验工计价
        searchClick(type, item) {
            const { prjId, manageMode } = item
            const base = type === 'checkMaterial' ? 'materialReconfigurationInfo' : 'CheckoutValuationDetail'
            const url = `${process.env.VUE_APP_ZHONGRUAN_URL}${base}?prjId=${prjId}&manageMode=${manageMode}`
            window.open(url, '_blank')
        },
        // 初始化发送组件高度
        initSendHeight() {
            this.$nextTick(() => {
                const params = {
                    height: this.$refs.getMaterialsInfo.clientHeight,
                    type: 'getMaterialsInfo'
                }
                console.log(params, 'getMaterialsInfo=>初始化发送物资总览查看高度')
                window.parent.postMessage(params, this.$fixIframeArr())
            })
        },
        // 点击下一步
        doNext() {
            // 发送事件通知使用者 以点击下一步 可以进行校验清单操作
            this.$nextTick(() => {
                const params = {
                    doNext: '200',
                    type: 'doNextSuccess'
                }
                console.log(params, 'doNextSuccess=>物资总览下一步点击成功')
                window.parent.postMessage(params, this.$fixIframeArr())
            })
        },
        // 获取Tab列表
        async getTabList() {
            const { code, data } = await getMaterialCodeList(this.prjInfos)
            if (+code === 200) {
                // 接口获取数据  此处需要预留一些事件 又可能选择了整体列表的子项目
                this.tablist = data
                // 默认选择第一个标签下的数据
                this.activeName = this.tablist[0]?.prjId
                this.getTablelist()
            }
        },
        // 获取表格数据
        async getTablelist() {
            const { code, data } = await getMaterialInfo({ prjId: this.activeName })
            if (+code === 200) {
                const { prjName, siteCode, investAmount, productInfo, serviceInfo, serviceDetailInfo } = data
                // 标题数据
                this.titleObj.prjName = prjName
                this.titleObj.siteCode = siteCode
                this.titleObj.investAmount = investAmount + '元'
                // 表格数据
                this.tableData.MaterialBinding = productInfo
                this.tableData.SerieceBinding = serviceInfo
                this.tableData.SuppliedMaterials = serviceDetailInfo
                this.$nextTick(() => {
                    for (let i = 0; i < this.$refs.myTable.length; i++) {
                        this.$refs.myTable[i].getTable()
                    }
                })
            }

            this.initSendHeight()
        }
    }
}

</script>
<style scoped lang='scss'>
.page-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
</style>
